<template>
	<view class="mine pages">
		<!-- 顶部空余 -->
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<view class="header">
			<view class="option" @tap="go('/pages/shop/option/option')">
				<uni-icons type="gear" color="#06061f" size="24"></uni-icons>
			</view>
		</view>
		<view class="user_info">
			<view class="user_img" @tap="go('/pages/shop/mine/userInfo/userInfo')">
				<image ref="img" class="img" :src="userInfo.avatar" mode="heightFix"></image>
			</view>
			<view class="user_detail" @tap="go('/pages/shop/mine/userInfo/userInfo')">
				<view class="user_name">{{ userInfo.nick_name }}</view>
				<view class="user_sign">{{ userInfo.desc }}</view>
			</view>
		</view>
		<view class="sort" style="margin-bottom: 20rpx;flex-direction: inherit;align-items: center;height: 180rpx;">
			<view style="width: 50%;text-align: center;border-right: 1px solid #ddd;">
				<view style="font-weight: bold;margin-top: 10rpx;font-size: 34rpx;">￥{{ userInfo.price }}</view>
				<view>{{$t('otherAdd.Balance')}}</view>
			</view>
			<view style="width: 50%;text-align: center;">
				<view style="font-weight: bold;margin-top: 10rpx;font-size: 34rpx;">{{ userInfo.score }}</view>
				<view>{{$t('otherAdd.Integral')}}</view>
			</view>
		</view>
		<view class="order sort">
			<view class="order_header sort_header">
				<view class="order_name sort_name">
					{{$t('mine.mine.Orders')}}
				</view>
				<view class="order_detail sort_detail" @tap="openOrder(0)">
					<view class="order_num sort_num">
						{{total}}
					</view>
					<view class="order_skip sort_skip">
						<uni-icons type="forward" size="14" color="#c3c3c7"></uni-icons>
					</view>
				</view>
			</view>
			<view class="order_content sort_content">
				<view class="order_item sort_item" v-for="item in orderList" :key="item.id" @tap="openOrder(item.id)">
					<image :src="item.img" mode="widthFix"></image>
					<view class="order_name sort_name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="wallet sort">
			<view class="wallet_header sort_header">
				<view class="wallet_name sort_name">
					{{$t('mine.mine.Purse')}}
				</view>
			</view>
			<view class="wallet_content sort_content">
				<view class="wallet_item sort_item" v-for="item in walletList" :key="item.id" @tap="openWallet(item)">
					<image :src="item.img" mode="widthFix"></image>
					<view class="wallet_name sort_name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="fund" @click="go('/pages/shop/mine/fund')">
			<view style="display: flex;align-items: center;">
				<uni-icons type="map" size="24"></uni-icons>
				<view style="margin-left: 10rpx;">{{$t('mine.mine.Records')}}</view>
			</view>
			<uni-icons type="right"></uni-icons>
		</view> -->
		<view class="collect" @click="go('/pages/shop/mine/collect')">
			<view style="display: flex;align-items: center;">
				<uni-icons type="star" size="24"></uni-icons>
				<view style="margin-left: 10rpx;">{{$t('mine.mine.My')}}</view>
			</view>
			<uni-icons type="right"></uni-icons>
		</view>
		<tab-bar isActive="3"></tab-bar>
	</view>
</template>

<script>
	import tabBar from "@/components/shop/tabBar/tabBar.vue"
	import { userIndex, orderLists } from '@/api/api.js'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				orderList: [{
					id: 1,
					name: this.$t('mine.mine.Payments'),
					img: require("@/static/shop/img/mine/order1.png")
				}, {
					id: 2,
					name: this.$t('mine.mine.Shipped'),
					img: require("@/static/shop/img/mine/order2.png")
				}, {
					id: 3,
					name: this.$t('mine.mine.Received'),
					img: require("@/static/shop/img/mine/order3.png")
				}, {
					id: 4,
					name: this.$t('mine.mine.Refund'),
					img: require("@/static/shop/img/mine/order4.png")
				}],
				walletList: [{
					id: 1,
					name: this.$t('mine.mine.Coupons'),
					img: require("@/static/shop/img/mine/wallet1.png"),
					path: "/pages/shop/wallet/coupon/coupon"
				}, {
					id: 2,
					name: this.$t('mine.mine.Recharge'),
					img: require("@/static/shop/img/mine/wallet2.png"),
					path: "/pages/shop/recharge/recharge"
				}, {
					id: 3,
					name: this.$t('mine.mine.Withdrawals'),
					img: require("@/static/shop/img/mine/wallet3.png"),
					path: "/pages/shop/withdrawals/withdrawals"
				}, {
					id: 4,
					name: this.$t('mine.mine.Wallet'),
					img: require("@/static/shop/img/mine/wallet4.png"),
					path: "/pages/shop/wallet/index"
				}, ],
				userInfo: {},
				total: 0
			}
		},
		mounted() {
			// setTimeout(() => {
			// 	console.log(this.$refs.img)
			// 	console.log(document.querySelector(".img"))
			// }, 2000)
		},
		onShow() {
			userIndex({
				token: uni.getStorageSync('token')
			}).then(res=>{
				this.userInfo = res.data.data
				uni.setStorageSync('userInfo', res.data.data)
			})
			orderLists({
				token: uni.getStorageSync('token'),
				page: 1,
				status: 0
			}).then(res=>{
				this.total = res.data.data.total
			})
		},
		methods: {
			go(url){
				uni.navigateTo({
					url:url
				})
			},
			openWallet(opt) {
				uni.navigateTo({
					url: opt.path
				})
			},
			openOrder(key) {
				if (key == 4) {
					uni.navigateTo({
						url: "/pages/shop/order/afterSale"
					})
				} else {
					uni.navigateTo({
						url: "/pages/shop/order/orderList?key=" + key
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		width: 100%;
		height: 100vh;
		padding: 30rpx 30rpx 140rpx 30rpx;
		background-color: #f5f5f9;

		.header {
			display: flex;
			justify-content: right;

			.option {
				margin-left: auto;
				margin-right: 0;
			}
		}

		.user_info {
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			margin: 30rpx 0;

			.user_img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;

				uni-image {
					width: 100%;
					height: 100%;
				}
			}

			.user_detail {
				width: 200rpx;
				overflow: hidden;

				.user_name {
					font-size: 32rpx;
					font-weight: 600;
					color: #06061f;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.user_sign {
					font-size: 24rpx;
					color: #595d6e;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

		}

		.sort {
			width: 100%;
			height: 220rpx;
			background: #fff;
			border-radius: 8rpx;
			padding: 40rpx 30rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.sort_header {
				display: flex;
				justify-content: space-between;

				.sort_name {

					font-size: 28rpx;
					font-weight: 600;
				}

				.sort_detail {
					font-size: 24rpx;
					color: #c3c3c7;
					display: flex;
					align-items: center;

					.sort_num {
						margin-right: 10rpx;
						line-height: 24rpx;
					}

					.sort_skip {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.sort_content {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.sort_item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					flex: 1;

					uni-image {
						width: 50rpx;
					}

					.sort_name {
						font-size: 24rpx;
						color: #595d6e;
						margin-top: 20rpx;
						line-height: 24rpx;
					}
				}
			}

		}

		.wallet {
			margin-top: 20rpx;
		}
		.fund{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			margin-top: 20rpx;
			height: 90rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 14px;
			font-weight: 600;
		}
		.collect{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			margin-top: 20rpx;
			height: 90rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 14px;
			font-weight: 600;
		}
	}
</style>